import { loadAndProcessData } from './loadAndProcessData.js';

const svg = d3.select('svg'),
  width = svg.attr('width'),
  height = svg.attr('height');
  
let projection = d3.geoMercator();//二维平面地图
  projection = d3.geoOrthographic();//地球二维投影
  projection = d3.geoStereographic();//二维立体投影
  projection = d3.geoEquirectangular();//带网格的二维平面地图
  projection = d3.geoNaturalEarth1();//生成普通地球地图

  
const bubbleSort = array => {
  console.log(typeof array[0]);
  for(let i=1;i<array.length;i++){
    for(let j=0;j<array.length-i;j++){
      if(array[j] > array[j+1]){
        let temp = array[j];
        array[j] = array[j+1];
        array[j+1] = temp;
      }
    }
  }
};

const path = d3.geoPath()
    .projection(projection);  
const g = svg.append('g');

svg.call(d3.zoom().on('zoom', () => {
    g.attr('transform', d3.event.transform);
}));

const colorScale = d3.scaleOrdinal(d3.schemeCategory10);
const colorValue = d => d.properties.economy;


g.append('path')
  .attr('d', path({type: 'Sphere'}))
  .attr('class', 'sphere');

loadAndProcessData().then( countries => {
  
  colorScale.domain(countries.features.map(colorValue))
    .domain(colorScale.domain().sort())
    .range(d3.schemeSpectral[colorScale.domain().length]);
  
  
  g.selectAll('path')
    .data(countries.features)
    .enter()
    .append('path')
      .attr('d', path)
      .attr('class', 'country')
      .attr('fill', d => colorScale(colorValue(d)))
    .append('title')
      .text(d => d.properties.name);  
});
